Disasters: Volcano

Zitat von Woltlab Plugin News

[Blockierte Grafik: https://www.woltlab.com/attachment/171169-screenshot-mockup-png/]

Eigenschaften

• Erstklassiges, modernes Design
• Dunkle Hintergründe
• Leicht anpassbare Farben
• Kompatibel mit allen offiziellen WoltLab-Erweiterungen
• Spezielle Info- und Bildboxen für ein individuelles Erlebnis (Anleitung weiter unten)

Zusätzliche Boxen/Features

Flexible Bilderliste mit Verlinkung: Ideal für Portfolios und Produktvorstellung

[Blockierte Grafik: https://www.woltlab.com/attachment/171170-flexcontainer-jpg/?thumbnail=1]

Wie wird die Box angelegt?

1. Gehe zu Kontrollzentrum > Administration > Boxen > + Box hinzufügen > Box-Typ "HTML"
2. Allgemeine Daten: Name der Box eintragen, Boxposition sowie Verlinkung festlegen
3. Inhalte: Den folgenden Beispiel-Quellcode in den Inhaltsbereich kopieren und den Teil <div>...</div> beliebig oft wiederholen

Code

Code

<div class="flexContainer">@@@WCF_PRE_LINEBREAK@@@    <div>@@@WCF_PRE_LINEBREAK@@@        <a href="https://www.bliqpunkt.de/">@@@WCF_PRE_LINEBREAK@@@            <img src="{{ media="109" size="original" }}" />@@@WCF_PRE_LINEBREAK@@@        </a>@@@WCF_PRE_LINEBREAK@@@    </div>@@@WCF_PRE_LINEBREAK@@@    <div>@@@WCF_PRE_LINEBREAK@@@        <a href="https://www.bliqpunkt.de/">@@@WCF_PRE_LINEBREAK@@@            <img src="{{ media="110" size="original" }}" />@@@WCF_PRE_LINEBREAK@@@        </a>@@@WCF_PRE_LINEBREAK@@@    </div>@@@WCF_PRE_LINEBREAK@@@</div>

Alles anzeigen

1. Verlinkung eintragen: Finde <a href="https://www.bliqpunkt.de/"> und ersetze https://www.bliqpunkt.de/ mit dem gewünschten Link
2. Bild einfügen: Finde {{ media="109" size="original" }} und ersetze "109"mit der ID einer eigenen Mediendatei (oder Bild-URL)

Informationen mit Buttons, Icons, Bildern und Verlinkungen präsentieren

Mit dem "bliqpunkt Info Box"-Container können u.a. für Apps Kurzbeschreibungen mit passenden Icons verfasst werden. Mittels der Buttons kann der User zum jeweiligen Downloadbereich für die Apps gelangen. Durch einen Screenshot auf der rechten Seite bekommt der User nochmal einen Überblick. Auch dieser Box-Container eignet sich bestens für Produkt- und Dienstleistungspräsentationen sowie Werbung/Eigenwerbung.

[Blockierte Grafik: https://www.woltlab.com/attachment/171171-bliqpunktinfobox-jpg/?thumbnail=1]

1. Gehe zu Kontrollzentrum > Administration > Boxen > + Box hinzufügen > Box-Typ "HTML"
2. Allgemeine Daten: Name der Box eintragen, Boxposition, CSS-Klasse sowie Verlinkung festlegen
3. Inhalte: Den folgenden Beispiel-Quellcode in den Inhaltsbereich kopieren

Code

Code

<div class="infoContainer">@@@WCF_PRE_LINEBREAK@@@  <h1>bliqpunkt Info Box</h1>@@@WCF_PRE_LINEBREAK@@@  @@@WCF_PRE_LINEBREAK@@@  <ul class="listContainer">@@@WCF_PRE_LINEBREAK@@@    <li class="listItem">@@@WCF_PRE_LINEBREAK@@@      <span class="icon icon32 fa-fire"></span>@@@WCF_PRE_LINEBREAK@@@      <span class="listItemTitle">Labore et dolore magna</span>@@@WCF_PRE_LINEBREAK@@@    </li>@@@WCF_PRE_LINEBREAK@@@    @@@WCF_PRE_LINEBREAK@@@    <li class="listItem">@@@WCF_PRE_LINEBREAK@@@      <span class="icon icon32 fa-bomb"></span>@@@WCF_PRE_LINEBREAK@@@      <span class="listItemTitle">Aliquyam erat sed diam voluptua</span>@@@WCF_PRE_LINEBREAK@@@    </li>@@@WCF_PRE_LINEBREAK@@@    @@@WCF_PRE_LINEBREAK@@@    <li class="listItem">@@@WCF_PRE_LINEBREAK@@@      <span class="icon icon32 fa-sun-o"></span>@@@WCF_PRE_LINEBREAK@@@      <span class="listItemTitle">At vero eos et accusam et justo ipsum dolor</span>@@@WCF_PRE_LINEBREAK@@@    </li>@@@WCF_PRE_LINEBREAK@@@  </ul>    @@@WCF_PRE_LINEBREAK@@@  @@@WCF_PRE_LINEBREAK@@@  <div class="buttonContainer">@@@WCF_PRE_LINEBREAK@@@    <a class="button buttonPrimary" href="https://www.bliqpunkt.de/">@@@WCF_PRE_LINEBREAK@@@      Download für Mac <span class="icon icon32 fa-apple"></span>@@@WCF_PRE_LINEBREAK@@@    </a>@@@WCF_PRE_LINEBREAK@@@    @@@WCF_PRE_LINEBREAK@@@    <a class="button" href="https://www.bliqpunkt.de/">@@@WCF_PRE_LINEBREAK@@@      Duo dolores@@@WCF_PRE_LINEBREAK@@@    </a>@@@WCF_PRE_LINEBREAK@@@  </div>@@@WCF_PRE_LINEBREAK@@@  @@@WCF_PRE_LINEBREAK@@@  <p>Et ea rebum <a href="https://www.bliqpunkt.de/">Stet clita gubergrene</a> takimata</p>@@@WCF_PRE_LINEBREAK@@@</div>@@@WCF_PRE_LINEBREAK@@@@@@WCF_PRE_LINEBREAK@@@<div class="imageContainer">@@@WCF_PRE_LINEBREAK@@@    <img src="{{ media="105" size="medium" }}" />@@@WCF_PRE_LINEBREAK@@@</div>

Alles anzeigen

1. Überschrift eintragen: Finde <h1>bliqpunkt Info Box</h1> und ersetze bliqpunkt Info Box mit der gewünschten Überschrift
2. Aufzählung mit Icons:
   1. Finde <span class="icon icon32 fa-fire"></span> und ersetze fa-fire mit dem Namen des ausgewählten Icons
   2. Finde <span class="listItemTitle">Labore et dolore magna</span> und ersetze Labore et dolore magna mit einem beliebigen Text
3. Buttons
   1. Mit Icons und Verlinkung:
      1. Finde <a class="button buttonPrimary" href="https://www.bliqpunkt.de/"> und ersetze https://www.bliqpunkt.de/ mit dem gewünschten Link
      2. Neben dem geschlossenen Tag wird ein beliebiger Text eingetragen
      3. Finde <span class="icon icon32 fa-apple"></span> und ersetze fa-apple mit dem Namen des ausgewählten Icons
   2. Ohne Icons, nur Verlinkung:
      1. Finde <a class="button" href="https://www.bliqpunkt.de/"> und ersetze https://www.bliqpunkt.de/ mit dem gewünschten Link
      2. Neben dem geschlossenen Tag wird ein beliebiger Text eingetragen
4. Text mit Verlinkung: Finde <p>Et ea rebum <a href="https://www.bliqpunkt.de/"</p> und ersetze den Text mit einem beliebig anderen sowie den Link href="https://www.bliqpunkt.de/"
5. Bild: Finde <div class="imageContainer"> <img src="{{ media="105" size="medium" }}" /> </div> und ersetze "105"mit der ID einer eigenen Mediendatei (oder Bild-URL)

_________________________________________________________

Bilder sind Beispielinhalte und nicht im Stil enthalten!

Alles anzeigen

Quelle: https://www.woltlab.com/pluginstore/fi…asters-volcano/